<!-- 商户申请审核 -->
<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="公司名称" prop="userType">
          <el-input v-model="queryParams.companyName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="入驻类型" prop="userType">
          <el-select v-model="queryParams.userType" placeholder="请选择" clearable style="width: 240px">
            <el-option v-for="dict in SETTLE_TYPE_LIST" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="注册时间">
          <el-date-picker v-model="tempTime" :editable="false" type="datetimerange" range-separator="~"
            start-placeholder="开始时间" end-placeholder="截止时间" value-format="YYYY-MM-DD HH:mm:ss" @change="handleChange" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="initList">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <base-page-table :table-data="tableData" :table-columns-data="tableColumnsData" :loading="loading"
      :page-num="queryParams.pageNum" :page-size="queryParams.pageSize" :total="queryParams.total"
      @handleQuery="handleQuery">
      <template #userType="scope">
        <el-tag type="primary" class="margin-r-10">
          {{ SETTLE_TYPE_OBJECT[scope.row.userType] }}
        </el-tag>
      </template>
      <template #status="scope">
        <el-tag v-if="scope.row.status == 1" type="success" class="margin-r-10">通过</el-tag>
        <el-tag v-if="scope.row.status == 2" type="danger" class="margin-r-10">驳回</el-tag>
        <el-tag v-if="scope.row.status == 0" type="warning">未审核</el-tag>
      </template>
      <template #handle="scope">
        <el-button link type="primary" :disabled="scope.row.status == 1 || scope.row.status == 2"
          @click="handleAudit(scope.row, MERCHANT_APPLY_AUDIT_STATUS_WORD['入驻通过'])">
          通过
        </el-button>
        <el-button link type="danger" :disabled="scope.row.status == 1 || scope.row.status == 2"
          @click="handleAudit(scope.row, MERCHANT_APPLY_AUDIT_STATUS_WORD['入驻失败'])">
          驳回
        </el-button>
      </template>
    </base-page-table>
    <el-dialog v-model="applyShow" title="通过" width="600px" @close="handleCloseDialog">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="150px" class="form">
        <el-form-item label="对接人	" prop="recommender">
          <el-select v-model="formData.recommender" placeholder="请选择">
            <el-option v-for="(item, index) in recommenderData" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="handleCloseDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
// import BasePageTable from '@/components/BasePageTable'
// import TagSelect from '@/components/TagSelect'
import { getMerchantApplyList, auditMerchantApply, auditAgentApply } from "@/api/apply/index";
import { MERCHANT_APPLY_AUDIT_STATUS_WORD } from "@/utils/enums/merchant";
import { SETTLE_TYPE_LIST, SETTLE_TYPE_OBJECT } from "@/utils/enums/system";
import { ref } from "vue";
import { useDictStore } from "@/store";
const dictStore = useDictStore();
const recommenderData = dictStore.getDictionary("recommender");
const tempTime = ref()
const queryParams = reactive({
  userType: "",
  pageNum: 1,
  pageSize: 10,
  total: 0,
  companyName: '',
  startDate: '',
  endDate: ""
});
const queryFormRef = ref();
const tableData = ref([]);
const tableColumnsData = ref([
  {
    type: "index",
    width: 60,
    label: "序号",
    align: "center"
  },
  {
    width: 200,
    label: "公司名称",
    prop: "companyName",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    width: 200,
    label: "入驻类型",
    customSlot: "userType",
    prop: "userType",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "合伙人名称",
    prop: "mallName",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "审核状态",
    prop: "status",
    align: "center",
    showOverflowTooltip: true,
    customSlot: "status",
  },
  {
    label: "注册时间",
    prop: "createTime",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "手机号",
    prop: "phonenumber",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "操作",
    prop: "handle",
    align: "center",
    customSlot: "handle",
    showOverflowTooltip: true,
  },
]);
const applyShow = ref(false);
const formRef = ref();
const formData = ref({
  id: "",
  status: undefined,
  recommender: "",
});
const formRules = reactive({
  recommender: [{ required: true, message: "请选择对接人", trigger: "change" }],
});
const handleAudit = (row, status) => {
  console.log(row, status);
  if (row.userType == "26") {
    if (status == 1) {
      applyShow.value = true;
      formData.value.id = row.id;
      formData.value.status = status;
    } else {
      funAuditAgentApply({
        id: row.id,
        status: status,
      });
    }
  } else {
    funcAuditMerchantApply({
      id: row.id,
      status: status,
    });
  }
};
/**
 * 请求相关
 *
 */
//获取入驻申请列表
const loading = ref(false);
const funcGetMerchantApplyList = async () => {
  try {
    loading.value = true;
    const res = await getMerchantApplyList({
      pageNum: queryParams.pageNum,
      pageSize: queryParams.pageSize,
      userType: queryParams.userType,
      companyName: queryParams.companyName,
      startDate: queryParams.startDate,
      endDate: queryParams.endDate
    });
    tableData.value = res.data;
    queryParams.total = res.total;
    // 刷新列表
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
};
//审核入驻申请
const funcAuditMerchantApply = async (params) => {
  try {
    console.log(params, "params", params);
    const res = await auditMerchantApply(params);
    funcGetMerchantApplyList();
    // 刷新列表
    console.log(res);
  } catch (err) {
    console.log(err);
  } finally {
  }
};

function handleChange(val) {
  if (val) {
    const [startTime, endTime] = val;
    queryParams.startDate = startTime || "";
    queryParams.endDate = endTime || "";
  } else {
    queryParams.startDate = "";
    queryParams.endDate = "";
  }
}

// 经纪人审核
const funAuditAgentApply = async (params) => {
  try {
    const res = await auditAgentApply(params);
    applyShow.value = false;
    funcGetMerchantApplyList();
    // 刷新列表
    console.log(res);
  } catch (err) {
    console.log(err);
  } finally {
  }
};
function handleCloseDialog() {
  applyShow.value = false;
  formData.value.id = "";
  formData.value.status = undefined;
  formData.value.recommender = "";
}
function handleResetQuery() {
  queryParams.companyName = ''
  queryParams.endDate = ''
  queryParams.startDate = ''
  queryParams.pageNum = 1
  queryParams.userType = ''
  tempTime.value = []
  initList();
}
async function handleSubmit() {
  const validate = await formRef.value.validate();
  if (!validate) return;
  funAuditAgentApply(formData.value);
}
function handleQuery(val) {
  queryParams.pageNum = val.pageNum;
  queryParams.pageSize = val.pageSize;
  funcGetMerchantApplyList();
}
function initList() {
  queryParams.pageNum = 1;
  funcGetMerchantApplyList();
}
onMounted(() => {
  funcGetMerchantApplyList();
});
</script>
<style lang="scss" scoped></style>
